<template>
    <div id="main" style="width: 1500px;height:1000px"></div>
</template>
<script>
    export default {
        data() {
            return {
                mapdata: [
                    [488.2358421078053, 459.70913833075736, 7, "@"],
                    [770.3415644319939, 757.9672194986475, 7, "@"],
                    [1180.0329284196291, 743.6141808346214, 7, "@"],
                    [894.03790632245, 1188.1985153835008, 7, "@"],
                    [1372.98925630313, 477.3839988649537, 7, "@"],
                    [1378.62251255796, 935.6708486282843, 7, "@"]
                ],
            };
        },
        mounted() {

        },
        created() {
            this.createMap();
        },
        methods: {
            createMap() {
                const echarts = require('echarts/lib/echarts');
                require('echarts/lib/component/grid');
                require('echarts/lib/chart/line');

                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line'
                    }],
                    graphic: [
                        {
                            type: 'image', // 图形元素类型
                            id: 'logo', // 更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
                            right: 'center', // 根据父元素进行定位 （居中）
                            bottom: '0%', // 根据父元素进行定位   （0%）, 如果bottom的值是 0，也可以删除该bottom属性值。
                            z: 0,  // 层叠
                            bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
                            style: {
                                image: 'https://www.boxuegu.com/assets/user/background1.png', // 这里一定要注意、注意，必须是https开头的图片路径地址
                                width: 945,
                                height: 800
                            }
                        }
                    ],
                };

                myChart.setOption(option);
            }
        },
        destroyed() { }
    };
</script>